import Preview from '@/components/Preview'
import { formatDateTime, formatMoneyNum } from '@/utils/displayHelper'
import { FILE_TYPE_ENUM, PCS_ORDERS_TYPE_ENUM } from '@/utils/enum'

const CommodityCard = ({ commodity }) => {
  return (
    <div className='mb-2 flex flex-col gap-2 rounded-lg rounded-md border border-solid p-4 last:mb-0'>
      <div className='flex justify-between'>
        <strong>订单号：{commodity.orderNumber}</strong>
        <strong>商品数量：{commodity.ordersDetailList.reduce((total, good) => total + good.commodityNumber, 0)}</strong>
        <strong>下单时间：{formatDateTime(commodity.createTime)}</strong>
        <strong className='ml-32'>
          订单金额：<span className='c-money'>{formatMoneyNum(commodity.amount)}</span>
        </strong>
      </div>
      {commodity.ordersDetailList.map((good, index) => (
        <div key={good.id} className='w-300px flex items-center gap-4'>
          <img
            alt='商品主图'
            src={good.commodityImage}
            className='size-18 rounded-md'
            onClick={() =>
              Preview.PromiseThen({
                previewIndex: index,
                previewList: commodity.ordersDetailList.map(good => ({
                  type: FILE_TYPE_ENUM.IMAGE,
                  url: good.commodityImage,
                })),
              })
            }
          />
          <div className='h-18 flex flex-col justify-between'>
            <strong>{good.commodityName}</strong>
            <div className='text-3 mb-1'>{good.commodityModel}</div>
            <div>
              <span className='c-money text-4'>{formatMoneyNum(good.price)}</span> / {good.unit}
            </div>
          </div>
          <div className='ml-auto'>x{good.commodityNumber}</div>
        </div>
      ))}
      <hr className='w-full border' />
      <div className='text-3.2 flex'>
        <span>收货信息：</span>
        <div>
          <div className='mb-1.5'>
            <span style={{ marginRight: '16px' }}>{commodity.name}</span>
            <span>{commodity.phone}</span>
          </div>
          <span>{commodity.addressDetail}</span>
        </div>
        <span className='bg-#fef5ec text-#f7933b border-#fad0a1 ml-4 mt-2 h-fit rounded-md border border-solid px-4 py-1'>
          {PCS_ORDERS_TYPE_ENUM.getText(commodity.addressType)}
        </span>
      </div>
    </div>
  )
}

export default CommodityCard
